<template>
  <view class="content">
    <view class="top-search">
      <u-search @change="searchData" placeholder="搜索" v-model="expertSort.keyword" clearabled :show-action="false"></u-search>
    </view>
    <view class="dropdown">
      <!-- <u-dropdown inactive-color="#F4333C" :duration="600" :dropDownShow="dropDownShow" @close="close" @open="open">
        <u-dropdown-item v-model="dropdownIndex" :title="selectList.title" :options="selectList.options"
          ><view class="slot-content">
            <view class="radio-content" v-for="(item, index) in selectList.options" :key="index">
              <u-radio-group v-model="selectValue" @change="radioGroupChange">
                <view class="name" :style="activation(item.label)">
                  {{ item.label }}
                </view>
                <u-radio @change="radioChange" :name="item.label" :disabled="item.disabled" active-color="#F4333C"> </u-radio>
              </u-radio-group>
            </view>
          </view>
        </u-dropdown-item>
      </u-dropdown> -->
      <u-dropdown inactive-color="#F4333C" :duration="600" :dropDownShow="dropDownShow" @close="close" @open="open">
        <u-dropdown-item v-model="dropdownIndex" :title="selectList.title">
          <view class="slot-content">
            <view class="radio-content" v-for="(item, index) in selectList.options" :key="index">
              <u-radio-group v-model="selectValue" @change="radioGroupChange">
                <view class="name" :style="activation(item.label)">
                  {{ item.label }}
                </view>
                <u-radio @change="radioChange" :name="item.label" :disabled="item.disabled" active-color="#F4333C"> </u-radio>
              </u-radio-group>
            </view>
          </view>
        </u-dropdown-item>
      </u-dropdown>
    </view>
    <view class="listStatus">
      <u-icon name="list" color="#f4333c" v-if="expertStatus" size="40" @tap="listStatus"></u-icon>
      <u-icon name="grid-fill" v-if="expertStatus == false"  color="#f4333c" size="40" @tap="listStatus"></u-icon>
      <!-- <image v-if="expertStatus == false" src="@/static/img/home/m-more.png" @tap="listStatus" alt=""></image>
      <image v-if="expertStatus" src="@/static/img/home/m-news.png" @tap="listStatus" alt=""></image> -->
    </view>
    <!-- 橱窗模式 -->
    <view class="doctor-information2" v-if="expertStatus">
      <view class="card-information" v-for="(item, index) in expertSortList" :key="index" @tap="toDoctorIndex(item.id)">
        <image :src="item.face" class="windowImg" alt=""></image>
        <view class="windowExpert">{{ item.realName }} </view>
        <view class="expertName">{{ item.siteName }}</view>
        <view class="domain">
          <view style="width: 60rpx; color: #444; font-weight: bold">擅长:</view>
          <view class="good">{{ item.domain }}</view>
        </view>
        <!-- <view class="price-grade">
          <view class="online">
            <text>在线问诊</text>
            <text>￥</text>
            <text
              >{{
                Number(item.consultPrice)
                  ? Number(item.consultPrice).toFixed(2)
                  : "0.00"
              }}元</text
            >
          </view>
          <view class="registered">
            <text>预约挂号</text>
            <text>￥</text>
            <text>{{
              Number(item.registerPrice)
                ? Number(item.registerPrice).toFixed(2)
                : "0.00"
            }}</text>
          </view>
          <view class="comments">
            <img src="@/static/img/registered/collect.png" />
            <text>{{ item.scoreAvg }}</text>
          </view>
        </view> -->
        <!-- <view class="doctor-img">
          <u-avatar :src="item.face" mode="circle" size="120"></u-avatar>
        </view>
        <view class="doctor-information">
          <text>{{ item.realName }}</text>
          <view class="area">
            <text>{{ item.siteName }}</text>
            <img src="@/static/img/base/back.png" alt="" />
          </view>
          <view class="good-at">
            <text>擅长:</text>
            <text>{{ item.domain }}</text>
          </view>
          <view class="price-grade">
            <view class="online">
              <text>在线问诊</text>
              <text>￥</text>
              <text>{{
                Number(item.consultPrice)
                  ? Number(item.consultPrice).toFixed(2)
                  : "0.00"
              }}</text>
            </view>
            <view class="registered">
              <text>预约挂号</text>
              <text>￥</text>
              <text>{{
                Number(item.registerPrice)
                  ? Number(item.registerPrice).toFixed(2)
                  : "0.00"
              }}</text>
            </view>
            <view class="comments">
              <img src="@/static/img/registered/collect.png" />
              <text>{{ item.scoreAvg }}</text>
            </view>
          </view> 
        </view>-->
      </view>
    </view>
    <!-- 列表模式 -->
    <view class="doctor-information" v-if="expertStatus == false">
      <view class="card-information" v-for="(item, index) in expertSortList" :key="index" @tap="toDoctorIndex(item.id)">
        <view class="doctor-img">
          <u-avatar :src="item.face" mode="circle" size="120"></u-avatar>
        </view>
        <view class="doctor-information">
          <text>{{ item.realName }}</text>
          <view class="area">
            <text>{{ item.siteName }}</text>
            <!-- <img src="@/static/img/base/back.png" alt="" /> -->
            <u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
          </view>
          <view class="good-at">
            <text>擅长:</text>
            <text>{{ item.domain }}</text>
          </view>
          <view class="price-grade">
            <view class="online">
              <text>在线问诊</text>
              <text>￥</text>
              <text>{{ Number(item.consultPrice) ? Number(item.consultPrice).toFixed(2) : '0.00' }}</text>
            </view>
            <view class="registered">
              <text>预约挂号</text>
              <text>￥</text>
              <text>{{ Number(item.registerPrice) ? Number(item.registerPrice).toFixed(2) : '0.00' }}</text>
            </view>
            <view class="comments">
              <!-- <img src="@/static/img/registered/collect.png" /> -->
              <u-icon name="star-fill" color="#f4333c" size="28"></u-icon>
              <text>{{ item.scoreAvg }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="no-more">
      <text @tap="loadingMore">没有更多了</text>
    </view>
  </view>
</template>

<script>
import { API } from '@/config/myApi.js'
export default {
  data() {
    return {
      expertStatus: false, //专家列表状态
      // 专家排序的搜索默认项
      expertSort: {
        expertId: 0,
        keyword: '',
        page: 0,
        rows: 0,
        sortField: '',
        sortType: ''
      },
      dropdownIndex: 1,
      selectValue: '默认排序', //默认
      selectList: {
        title: '综合排序',
        options: [
          {
            label: '默认排序',
            value: 1
          },
          {
            label: '好评优先',
            value: 2
          },
          {
            label: '热度优先',
            value: 3
          },
          {
            label: '销量优先',
            value: 4
          }
        ]
      },
      expertSortList: [], // 专家列表
      // 专家排序的搜索默认项
      expertSort: {
        keyword: '',
        page: 1,
        rows: 10,
        sortField: '',
        sortType: ''
      },
      dropDownShow: false
    }
  },
  onLoad() {
    this.getExpertSortList(this.expertSort) //获取专家排序的集合
  },
  methods: {
    // 获取专家排序的集合
    async getExpertSortList(data) {
      let res = await API.getExpertSortList(data)
      if (res.code === 200) {
        res.result.list.forEach((v) => {
          if (v.consultPrice) {
            v.consultPrice = v.consultPrice.toFixed(2)
          } else {
            v.consultPrice = '0.00'
          }
        })
        this.expertSortList = res.result.list
        console.log('专家排序', this.expertSortList)
      }
    },
    // 搜索关键词
    searchData() {
      this.getExpertSortList({ keyword: this.expertSort.keyword })
    },
    // 打开下拉菜单
    open(index) {
      // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
      // 同时内部会自动给当前展开项进行高亮
      this.dropDownShow = true
    },
    // 关闭下拉菜单
    close(index) {
      // 关闭的时候，给当前项加上高亮
      // 当然，您也可以通过监听dropdown-item的@change事件进行处理
      this.dropDownShow = false
    },
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      this.selectValue = e
      console.log('某个单选框', e)
      console.log(e)
      if (e === '默认排序') {
        this.getExpertSortList({ sortField: null })
      } else if (e === '好评优先') {
        this.getExpertSortList({ sortField: 1 })
      } else if (e === '热度优先') {
        this.getExpertSortList({ sortField: 2 })
      } else {
        this.getExpertSortList({ sortField: 3 })
      }
    },
    radioGroupChange() {},
    loadingMore() {
      console.log('加载更多')
    },
    //去医生主页
    toDoctorIndex(id) {
      uni.navigateTo({
        url: '/pages/doctor/doctorIndex?doctorId=' + id
      })
    },
    listStatus() {
      this.expertStatus = !this.expertStatus
      if (this.expertStatus) {
        console.log('列表模式')
      } else {
        console.log('橱窗模式')
      }
    }
  },
  computed: {
    // 控制激活样式
    activation() {
      return (label) => {
        if (label === this.selectValue) {
          return {
            color: '#F4333C'
          }
        } else {
          return {
            color: ''
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$mainPadding: 30rpx;
$activeColor: #f4333c;
$baseColor: #333333;

.content {
  .top-search {
    background-color: #fff;
    padding: 30rpx $mainPadding 0;
    // height: 174rpx;
  }

  .dropdown {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .radio-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100vw;
      height: 100rpx;
      padding: 0 50rpx;
      background-color: #fff;
      border-top: 1rpx solid #e3e3e3;

      .name {
        width: 80vw;
        flex: 1;
      }
    }
  }
  .listStatus {
    text-align: right;
    padding: 20rpx 40rpx;
    > image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .doctor-information2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card-information {
      box-sizing: border-box;
      margin: 10rpx;
      width: 46%;
      .windowImg {
        width: 100%;
        height: 300rpx;
      }
      .domain {
        display: flex;
        height: 36rpx;
        font-size: 24rpx;
        .good {
          width: 240rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #666;
        }
      }
      .windowExpert {
        font-weight: bold;
      }
    }
  }
  .doctor-information {
    padding: 0rpx $mainPadding;
    overflow: hidden;

    .card-information {
      display: flex;
      background: #fff;
      border-radius: 14rpx;
      padding: 24rpx;
      margin-top: 24rpx;

      .doctor-img {
        width: 120rpx;
        height: 120rpx;
        border: 1rpx solid red;
        border-radius: 60rpx;
      }

      .doctor-information {
        padding: 0rpx;
        margin-left: 30rpx;
        width: 490rpx;

        > text {
          display: block;
          color: $baseColor;
          font-size: 14px;
          font-weight: bold;
        }

        .area {
          margin-top: 30rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          > text {
            color: $baseColor;
            font-size: 14px;
            font-weight: bold;
          }

          > img {
            width: 13rpx;
            height: 22rpx;
            transform: rotate(180deg);
          }
        }

        .good-at {
          margin-top: 30rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;

          > text:first-of-type {
            color: $baseColor;
            font-size: 14px;
            font-weight: bold;
          }

          > text:last-of-type {
            color: #666666;
            font-size: 14px;
          }
        }

        .price-grade {
          display: flex;
          justify-content: space-between;
          margin-top: 30rpx;

          .online,
          .registered {
            display: flex;
            align-items: center;

            > text:first-of-type {
              font-size: 10px;
              color: #666666;
            }

            > text:nth-of-type(2) {
              color: #f4333c;
              font-size: 10px;
            }

            > text:last-of-type {
              color: #f4333c;
              font-size: 14px;
              font-weight: bold;
            }
          }

          .comments {
            > img {
              width: 24rpx;
              height: 23rpx;
            }

            > text {
              color: #f4333c;
              font-size: 14px;
              font-weight: bold;
              margin-left: 4rpx;
            }
          }
        }
      }
    }
  }

  .no-more {
    width: 100vw;
    margin: 20rpx 0;
    // position: fixed;
    // bottom: 35rpx;
    text-align: center;

    > text {
      font-size: 13px;
      color: #999999;
    }
  }
}
</style>
